<template>
  <div class="returnFee">
    <div class="banner"  :style="{'height':bannerHeight+'px'}">
      <div class="header"></div>
    </div>
    <div class="detailed" style="z-index: 0;">
      <div v-if="!hasData" class="noContent">
        <p>您还没有加盟过,快去找申请吧~</p>
        <button class="button" @click="goToFindJob()">去申请</button>
      </div>
      <div v-else class="detailed-content">
        <p class="text-md" style="padding: 5px 0 10px 0;">已申请</p>
        <div class="list" v-for='(item, index) in list' :key='index'>
          <div class="fl text-md text-normal">
            {{item.storeContacts}}
          </div>
          <div class="fr" style="width: 50%;">
           <div class="moeny"><span class="text-md">{{item.storeContactsPhone}}</span></div>
           <div class="text-sm text-gray">{{item.storeLocation}}</div>
         </div>
       </div>
     </div>
   </div>
   <bottomMenu :menuType="menuType"></bottomMenu>
 </div>
</template>

<script>
  import bottomMenu from './bottomMenu.vue'
  import {getUserStores} from '@/controller'
  export default {
    name: 'returnFee',
    data () {
      return {
        bannerHeight: window.innerWidth / (25 / 9),
        msg: 'returnFee',
        hasData: false,
        menuType: 3,
        list: [],
      }
    },

    filters: {
      filterDate(date) {
        var date = new Date(date);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';
        return Y + M + D;
      }
    },

    mounted(){
      let bindStatus = localStorage.getItem('hasBind1');
      if(bindStatus=='false'){
        this.$router.push({
          path: `/binding/0/-1/`,
        })
      }
      this.init();
    },
    methods:{
      async init() {
        const result = await getUserStores();
        if (result.code == 0) {
          if(!result.data || result.data.length == 0) {
            this.hasData = false
          } else {
            this.hasData = true;
            this.list = result.data;
          }
        }
      },

      goToFindJob(){
        this.$router.push({
          path:`/cooperation`
        })
      },
    },
    components: {
      'bottomMenu': bottomMenu
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .returnFee{
    position: absolute;
    background: #f5f5f5;
    height: 100%;
    width: 100%;
  }
  .banner{
    background: url("/static/wechat/images/centerBg@2x.png");
    background-size: 100%;
    background-position-y: 70%;
  }
</style>
